<template>
  <div class="mainContainer">
    <div class="chatContainer">
      <div class="head">
        <span>聊天室</span>
      </div>
      <div class="friendList">
          <el-card style="heigth:100%">
                  <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText"
          style="margin-bottom: 10px"
        >
        </el-input>
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          accordion
          :filter-node-method="filterNode"
          @node-click="turn"
          ref="tree"
        >
        </el-tree>
          </el-card>

      </div>
      <div class="chatBody">
        <div class="chat">
          <el-card class="chatcard"></el-card>
        </div>
        <div class="send">
          <el-card class="chatcard">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="textarea"
              maxlength="30"
              show-word-limit
            >
            </el-input>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: "",
      tableData: null,
      filterText: "",
      data: [
        {
          id: 1,
          label: "2021年下学期",
          children: [
            {
              id: 9,
              label: "机械一班",
            },
            {
              id: 10,
              label: "机械三班",
            },
          ],
        },
        {
          id: 1,
          label: "2021年上学期",
          children: [
            {
              id: 9,
              label: "计算机一班",
            },
            {
              id: 10,
              label: "计算机三班",
            },
          ],
        },
        {
          id: 1,
          label: "2020年上学期",
          children: [
            {
              id: 9,
              label: "电气一班",
            },
            {
              id: 10,
              label: "电气三班",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
};
</script>

<style lang="less" scoped>
.mainContainer {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chatContainer {
  height: 80%;
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid hsl(0, 2%, 61%);
}
.head {
  height: 10%;
  width: 100%;
  border: 1px solid hsl(0, 2%, 61%);
}
.friendList {
  height: 90%;
  width: 25%;
  display: block;
  padding: 10px;
  border: 1px solid hsl(0, 2%, 61%);
}
.chatBody {
  height: 90%;
  width: 75%;
  display: flex;
  flex-wrap: wrap;
}
.chat {
  height: 70%;
  width: 100%;
  display: flex;
  padding: 5px;
  border: 1px solid hsl(0, 2%, 61%);
}
.send {
  height: 30%;
  width: 100%;
  display: flex;
  padding: 5px;
  border: 1px solid hsl(0, 2%, 61%);
}
.chatcard {
  width: 100%;
}

</style>